<template>
	<u-popup v-model="popupVisible" mode="bottom" border-radius="14" z-index="9999" :safe-area-inset-bottom="true">
		<div class="popup_view">
			<view class="product-title">
				<image class="pop-img" :src="specActItem.img"></image>
				<view class="ttt">
					<view>{{ specActItem.name }}</view>
					<view style="padding-top: 40rpx;">
						<text>￥{{ specActItem.amount }}</text>
						<!-- 分销返佣 -->
						<block v-if="vuex_user.type == 2 && rebate > 0 && vuex_user.commission > 0">
							<text class="u-font-25 sww-tp u-m-r-5 u-m-l-20">分享赚</text>
							<text
								class="u-font-25 sww-tp">{{ $rebateNum(rebate, vuex_user.commission) }}</text>
						</block>
					</view>
				</view>
			</view>
			<view class="prod-title">规格</view>
			<view class="prod-spec-list">
				<block v-for="(item, index) in prodStockList" :key="index">
					<view class="prod-spec-item" :class="{ 'prod-spec-act': index === specActIndex }"
						@click="$specChange(item, index)">
						<text class="u-line-1">{{ item.name }}</text>
					</view>
				</block>
			</view>
			<view class="prod-title">数量</view>
			<view class="gulp-box">
				<u-number-box v-model="specNum" input-height="54" input-width="104" :max="specActItem.stock_num">
				</u-number-box>
			</view>
			<view class="pop-btn" @click="exchange">立即购买</view>
		</div>
	</u-popup>
</template>

<script>
	export default {
		props: {
			prodInfo: {
				// 如果已有商品详情，可以传入，否则在弹框调起时会获取
				type: Object,
				default: () => {}
			}
		},
		data() {
			return {
				specActIndex: -1, // 当前选中的规格
				popupVisible: false, // 弹窗
				specNum: 0,
				specActItem: {},
				dataForm: {},
				prodStockList: []
			}
		},
		computed: {
			rebate() {
				//计算返佣
				return this.specActItem.rebate * this.specNum;
			}
		},
		watch: {
			prodInfo(val) {
				if (val && val.pk_id) {
					this.dataForm = {
						...val,
						product_detailed: null
					}
					this.specActItem = {}
					this.prodStockList = val.product_detailed ? JSON.parse(JSON.stringify(val.product_detailed)) : [];
					this.$checkInfoByProd();
				}
			}
		},
		components: {},
		mounted() {},
		methods: {
			//显示弹框
			$showPopup(dataForm) {
				this.popupVisible = true;
			},
			/**
			 * 商品详情页：格式化库存规格列表，设置选中规格
			 * noShow :不打开弹窗
			 * */
			$checkInfoByProd() {
				this.$nextTick(() => {
					if (this.prodStockList.length > 0) {
						if (!this.specActItem.pk_id) {
							if (this.specActIndex === -1) {
								this.specActIndex = 0;
								this.specActItem = {
									...this.prodStockList[0]
								};
								this.specNum = this.specActItem.stock_num > 0 ? 1 : 0;
							} else {
								this.specActItem = {
									...this.prodStockList[this.specActIndex]
								};
								this.specNum = this.specNum <= this.specActItem.stock_num ? this.specNum : this
									.specActItem.stock_num;
							}
						}
					} else {
						this.$toast('库存不足');
					}
				});
			},
			// 切换规格
			$specChange(item, index) {
				this.$u.debounce(
					() => {
						if (this.specActIndex === index) return;
						this.specActItem = {
							...item
						}
						this.specActIndex = index;
						this.specNum = this.specNum > item.stock_num ? item.stock_num : this.specNum;
					},
					300,
					true
				);
			},
			exchange() {
				if (this.specActIndex > -1) {
					this.$emit('submit', {
						...this.specActItem,
						specNum: this.specNum
					})
				}
			},
		}
	}
</script>
<style lang="scss" scoped>
	.popup_view {
		width: 100%;
		min-height: 600rpx;
		padding: 24rpx;
	}

	.pop-img {
		width: 150rpx;
		height: 150rpx;
		margin-right: 20rpx;
		border-radius: 10rpx;
	}

	.ttt {
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.product-title {
		padding: 30rpx;
		display: flex;
		align-items: center;
		font-size: 30rpx;
		color: $sww-theme-price;
	}

	.prod-title {
		padding-top: 30rpx;
		line-height: 1;
		font-size: 28rpx;
	}

	.prod-spec-list {
		width: 100%;
		display: flex;
		flex-wrap: wrap;

		.prod-spec-item {
			min-width: 160rpx;
			max-width: 100%;
			padding: 0 30rpx;
			height: 52rpx;
			border-radius: 26rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 24rpx;
			color: #666666;
			margin: 20rpx 20rpx 0 0;
			position: relative;

			&::after {
				content: '';
				width: 199.8%;
				height: 199.7%;
				border-radius: 52rpx;
				border: 1rpx solid #666666;
				position: absolute;
				top: 0;
				left: 0;
				transform: scale(0.5, 0.5);
				pointer-events: none;
				transform-origin: 0 0;
			}
		}

		.prod-spec-act {
			background-color: var(--color);
			color: #ffffff;

			&::after {
				border: none;
			}
		}
	}

	.gulp-box {
		margin-top: 20rpx;
	}

	.pop-btn {
		width: 100%;
		text-align: center;
		color: #fff;
		font-size: 30rpx;
		background-color: red;
		margin-top: 52rpx;
		line-height: 82rpx;
	}
</style>
